<template>
    <div class="comment-container">
        <h1>发表评论</h1>
        <textarea placeholder="请输入您的评论..." maxlength="200" v-model="commentText"></textarea>
        <el-button type="primary" size="large" @click="postComment">发表评论</el-button>
        <div class="comment-list">
            <div class="comment-area" v-for="(item,index) in commentList" :key="index">
                <div class="comment-title" :class="isDark === true?'Dark':' '">
                    <img :src="item.user.avatar_url" alt="" class="comment_avatar">
                    <span :style="`font-size:`+(parseInt(subjectFont)-2)+`px`">{{item.user.name}}</span>
                </div>
                <div class="comment-content" :style="`font-size:`+(parseInt(subjectFont)-2)+`px`">{{item.text}}</div>
                <span class="plublish_time" :style="`font-size:`+(parseInt(subjectFont)-6)+`px`">{{item.create_time}}</span>
            </div>
        </div>
       
        <el-button @click="getMore">加载更多</el-button>  
    </div>
</template> 

<script>
import { formatDate } from '../../common/utils'  ;
import { getContent } from "../../api/getContent";
import { mapState } from 'vuex'

    export default {
        name:'Comment',
        data(){
            return{
                pageIndex:1,
                commentList:[],
                commentText:''
            }
        },
        created() {
            this.postComment()
        },
        computed:{
            ...mapState(['subjectFont','isDark'])
        },
        methods:{
            getComments(){
                this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageIndex).then(result=>{
                    if(result.body.status===0){
                       
                        this.commentList.push.apply(this.commentList,result.body.message)
                    }else{
                        console.log("请求失败")
                    }
                })
            },
            getMore(){
                this.pageIndex++
                this.getComments()
            },
            postComment(){
                console.log(this.$route.params.id)
                 let data = {
                    group_id: this.$route.params.id,
                    item_id: this.$route.params.id,
                    offset: 0,
                    count: 5
                 }
                //获得该文章的评论信息
                
                getContent(data.group_id,data.item_id,data.offset,data.count).then(data=>{
                    data.forEach(async e => {
                        e.create_time =await formatDate(e.create_time, 'onlyDate')
                    });
                    this.commentList = data
                })
                
            }
        },
        props:["id"]
    }
</script>

<style scoped>
.comment-container textarea{
    margin:0;
    font-size:13px;
}
.comment-container h1{
    padding:10px 0;
    font-size: 15px;
    font-weight: 600;
}
.comment-container .comment-list{
    margin:10px 0;
    font-size: 13px;
    line-height: 30px;
}
.comment-container .comment-title{
    background-color: #ccc;
    padding-left:5px;
}
.comment-title{
    height: 40px;
}
.comment-title span{
    display: block;
    float: left;
    line-height: 40px;
}
.comment-container .comment-content{
    text-indent: 1em;
}
.plublish_time{
    position: absolute;
    right: 10px;
    bottom: 5px;
}
.comment-area{
    position: relative;
    padding-bottom: 30px;
}
.comment_avatar{
    height: 30px;
    width: 30px;
    margin: 5px;
    float:left;
    border-radius: 50%;
}
.Dark{
    background-color:rgb(52,55,64)!important;
    color: #fff!important;
}
</style>